<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>IPA</el-breadcrumb-item>
      <el-breadcrumb-item>IPA列表</el-breadcrumb-item>
    </el-breadcrumb>



    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-select v-model="value" placeholder="请选择App">
          <el-option
            v-for="item in options_name"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择App版本">
          <el-option
            v-for="item in options_version"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span>关联App列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="submitForm_ipa">添加</el-button>
      </div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="appv1" name="1">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="version"
              label="版本"
            >
            </el-table-column>
            <el-table-column
              prop="uploadtime"
              label="上传时间"
            >
            </el-table-column>
            <el-table-column
              prop="upload"
              label="上传人">
            </el-table-column>
            <el-table-column
              label="下载">
              <template slot-scope="scope">
              <el-popover
                placement="bottom"
                title="扫码或点击链接下载"
                width="300"
                trigger="hover">
                <div>
                  <div class="ipa_list_down_rocode">
                    <img src="@/assets/logo.png" height="100" width="100">
                  </div>
                  <div class="ipa_list_dwon_link">
                    <el-link type="primary" href="https://element.eleme.io">www.xiazai.com</el-link>
                  </div>

                </div>
                <el-button class="ipa_list_download_btn" slot="reference" type="primary">下载</el-button>
              </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">重新上传</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="note"
              label="备注">
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>


    </el-card>


  </div>
</template>

<script>
  export default {
    name: "IpaTabulation",
    data() {
      return {
        activeNames: ['0'],
        options_name: [{
          value: '选项1',
          label: 'app1'
        }, {
          value: '选项2',
          label: 'app2'
        }, {
          value: '选项3',
          label: 'app3'
        }, {
          value: '选项4',
          label: 'app4'
        }, {
          value: '选项5',
          label: 'app5'
        }],
        options_version: [{
          value: '选项1',
          label: '1'
        }, {
          value: '选项2',
          label: '2'
        }, {
          value: '选项3',
          label: '3'
        }, {
          value: '选项4',
          label: '4'
        }, {
          value: '选项5',
          label: '5'
        }],
        tableData: [{
          uploadtime: '2020-7-7',
          upload: '上传',
          downlink: 'www.downlik.com',
          version: '1',
          operations: '删除',
          note: '不知道'
        }, {
          uploadtime: '2020-7-7',
          upload: '上传',
          downlink: 'www.downlik.com',
          version: '2',
          operations: '删除',
          note: '不知道'
        }, {
          uploadtime: '2020-7-7',
          upload: '上传',
          downlink: 'www.downlik.com',
          version: '3',
          operations: '删除',
          note: '不知道'
        }, {
          uploadtime: '2020-7-7',
          upload: '上传',
          downlink: 'www.downlik.com',
          version: '4',
          operations: '删除',
          note: '不知道'
        }],
        value: ''
      }
    },
    methods: {
      submitForm_ipa() {
        this.$router.push("/")
        // alert(1111)
      },
      goBack_ipa() {
        this.$router.push("/addIpa")
      },
      handleChange(val) {
        console.log(val);
      },

      handleEdit(index, row) {

        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },

    }

  }
</script>

<style scoped>
  .box-card {
    margin-top: 20px;
  }
  .ipa_list_down_rocode{
    width: 100%;
    float: left;
    text-align: center;
  }
 .ipa_list_download_btn{
   padding: 5px 10px;
 }
  .ipa_list_dwon_link{
    width: 100%;
    text-align: center;
    float: left;
  }
  /*img{*/
  /*  margin-left: 100px;*/
  /*}*/
  .el-link{
    display: inline;
    text-align: center;
    /*margin-left: 100px;*/
  }
</style>

